<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>操作记录字段映射测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .test-container {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }
        .test-title {
            color: #409eff;
            border-bottom: 2px solid #409eff;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
        .data-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        .data-table th,
        .data-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
        .data-table th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        .field-mapping {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }
        .mapping-item {
            flex: 1;
            margin: 0 10px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 4px;
            border-left: 4px solid #409eff;
        }
        .old-field {
            color: #f56c6c;
            text-decoration: line-through;
        }
        .new-field {
            color: #67c23a;
            font-weight: bold;
        }
        .code-block {
            background: #f4f4f4;
            padding: 10px;
            border-radius: 4px;
            font-family: monospace;
            margin: 10px 0;
            overflow-x: auto;
        }
        .json-data {
            background: #2d3748;
            color: #e2e8f0;
            padding: 15px;
            border-radius: 4px;
            font-family: monospace;
            margin: 10px 0;
            overflow-x: auto;
        }
    </style>
</head>
<body>
    <h1>操作记录字段映射测试页面</h1>
    
    <div class="test-container">
        <h2 class="test-title">字段映射关系对比</h2>
        
        <div class="field-mapping">
            <div class="mapping-item">
                <h4>1. 操作人员字段</h4>
                <p><strong>前端显示字段:</strong> operatorName</p>
                <p><strong>修改前:</strong> <span class="old-field">operatorName</span></p>
                <p><strong>修改后:</strong> <span class="new-field">createBy</span></p>
                <p><strong>说明:</strong> 使用创建人字段显示操作人员</p>
            </div>
            
            <div class="mapping-item">
                <h4>2. 操作仓库字段</h4>
                <p><strong>前端显示字段:</strong> warehouseName</p>
                <p><strong>修改前:</strong> <span class="old-field">warehouseName</span></p>
                <p><strong>修改后:</strong> <span class="new-field">warehouse.warehouseName</span></p>
                <p><strong>说明:</strong> 从关联的warehouse对象中获取仓库名称</p>
            </div>
            
            <div class="mapping-item">
                <h4>3. 操作描述字段</h4>
                <p><strong>前端显示字段:</strong> operationDescription</p>
                <p><strong>修改前:</strong> <span class="old-field">operationDescription</span></p>
                <p><strong>修改后:</strong> <span class="new-field">operationDetail</span></p>
                <p><strong>说明:</strong> 使用操作详情字段显示操作描述</p>
            </div>
        </div>
    </div>
    
    <div class="test-container">
        <h2 class="test-title">修改前后数据结构对比</h2>
        
        <h3>修改前的数据结构</h3>
        <div class="json-data">
{
  "operationTime": "2024-01-15T10:30:00",
  "operationType": "1",
  <span class="old-field">"operatorName": "张三",</span>
  <span class="old-field">"warehouseName": "华东中央库房",</span>
  <span class="old-field">"operationDescription": "器具新增操作，初始化器具信息",</span>
  "remark": "系统新增"
}
        </div>
        
        <h3>修改后的数据结构</h3>
        <div class="json-data">
{
  "operationTime": "2024-01-15T10:30:00",
  "operationType": "1",
  <span class="new-field">"createBy": "zhangsan",</span>
  <span class="new-field">"warehouse": {
    "warehouseName": "华东中央库房",
    "warehouseId": "WH001"
  },</span>
  <span class="new-field">"operationDetail": "器具新增操作，初始化器具信息",</span>
  "remark": "系统新增"
}
        </div>
    </div>
    
    <div class="test-container">
        <h2 class="test-title">前端表格列定义修改</h2>
        
        <h3>修改前的表格列定义</h3>
        <div class="code-block">
&lt;el-table-column prop="operatorName" label="操作人员" width="120" align="center" /&gt;
&lt;el-table-column prop="warehouseName" label="操作仓库" width="150" align="center" /&gt;
&lt;el-table-column prop="operationDescription" label="操作描述" min-width="200" /&gt;
        </div>
        
        <h3>修改后的表格列定义</h3>
        <div class="code-block">
&lt;el-table-column prop="createBy" label="操作人员" width="120" align="center" /&gt;
&lt;el-table-column label="操作仓库" width="150" align="center"&gt;
  &lt;template slot-scope="scope"&gt;
    {{ scope.row.warehouse ? scope.row.warehouse.warehouseName : '-' }}
  &lt;/template&gt;
&lt;/el-table-column&gt;
&lt;el-table-column prop="operationDetail" label="操作描述" min-width="200" /&gt;
        </div>
    </div>
    
    <div class="test-container">
        <h2 class="test-title">数据兼容性处理</h2>
        
        <p>为了确保数据的兼容性，添加了 <code>processOperationData</code> 方法：</p>
        
        <div class="code-block">
/** 处理操作记录数据 */
processOperationData(data) {
  return data.map(item => {
    return {
      ...item,
      // 操作人员兼容性处理
      createBy: item.createBy || item.operatorName || '-',
      // 操作仓库兼容性处理
      warehouse: item.warehouse || { warehouseName: item.warehouseName || '-' },
      // 操作描述兼容性处理
      operationDetail: item.operationDetail || item.operationDescription || '-'
    }
  })
}
        </div>
        
        <h3>兼容性处理说明</h3>
        <table class="data-table">
            <thead>
                <tr>
                    <th>字段</th>
                    <th>优先级1</th>
                    <th>优先级2</th>
                    <th>默认值</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>操作人员</td>
                    <td>createBy</td>
                    <td>operatorName</td>
                    <td>'-'</td>
                </tr>
                <tr>
                    <td>操作仓库</td>
                    <td>warehouse.warehouseName</td>
                    <td>warehouseName</td>
                    <td>'-'</td>
                </tr>
                <tr>
                    <td>操作描述</td>
                    <td>operationDetail</td>
                    <td>operationDescription</td>
                    <td>'-'</td>
                </tr>
            </tbody>
        </table>
    </div>
    
    <div class="test-container">
        <h2 class="test-title">测试数据示例</h2>
        
        <div id="testData"></div>
    </div>
    
    <div class="test-container">
        <h2 class="test-title">测试步骤</h2>
        
        <ol>
            <li><strong>前端验证</strong>：
                <ul>
                    <li>打开器具管理页面</li>
                    <li>点击任意器具的"详情"按钮</li>
                    <li>切换到"操作记录"标签页</li>
                    <li>验证三个字段是否正确显示</li>
                </ul>
            </li>
            <li><strong>数据结构验证</strong>：
                <ul>
                    <li>检查API返回的数据结构</li>
                    <li>验证字段映射是否正确</li>
                    <li>测试兼容性处理是否生效</li>
                </ul>
            </li>
            <li><strong>边界情况测试</strong>：
                <ul>
                    <li>测试字段为空的情况</li>
                    <li>测试warehouse对象不存在的情况</li>
                    <li>测试旧数据结构的兼容性</li>
                </ul>
            </li>
        </ol>
    </div>

    <script>
        // 模拟数据处理方法
        function processOperationData(data) {
            return data.map(item => {
                return {
                    ...item,
                    createBy: item.createBy || item.operatorName || '-',
                    warehouse: item.warehouse || { warehouseName: item.warehouseName || '-' },
                    operationDetail: item.operationDetail || item.operationDescription || '-'
                }
            })
        }

        // 测试数据
        const testData = [
            {
                operationTime: "2024-01-15T10:30:00",
                operationType: "1",
                createBy: "zhangsan",
                warehouse: { warehouseName: "华东中央库房" },
                operationDetail: "器具新增操作，初始化器具信息",
                remark: "系统新增"
            },
            {
                operationTime: "2024-01-14T15:20:00",
                operationType: "2",
                createBy: "lisi",
                warehouse: { warehouseName: "华东中央库房" },
                operationDetail: "为器具绑定定位器设备LOC001",
                remark: "设备绑定"
            }
        ]

        // 渲染测试数据
        function renderTestData() {
            const container = document.getElementById('testData')
            const processedData = processOperationData(testData)
            
            let html = '<h3>处理后的测试数据</h3>'
            html += '<div class="json-data">'
            html += JSON.stringify(processedData, null, 2)
            html += '</div>'
            
            container.innerHTML = html
        }

        // 页面加载完成后渲染
        document.addEventListener('DOMContentLoaded', function() {
            renderTestData()
            console.log('字段映射测试页面已加载')
        })
    </script>
</body>
</html>
